<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8">
	<title>零基础HTML编码</title>
	<link rel="stylesheet" href="css/basic.css">
</head>
<body>
	<header>
		<h1>网站一级标题</h1>
		<ul>
			<li>导航链接1</li>
			<li>导航链接2</li>
			<li>导航链接3</li>
			<li>导航链接4</li>
		</ul>
	</header>

	<article id="article1">
		<hgroup>
			<h2>文章一级标题</h2>
			<h3>文章二级标题</h3>
		</hgroup>
		<span>陆逊 2016年9月19日</span>
		<p>这是一个很长的段落这是一个很长的段落这是一个很长的段落这是一个很长的段落这是一个很长的段落<br>
		一个很长的段落这是一个很长的段落这是一个很长的段落这是一个很长的段落这是一个很长的段落这是一个很长的段落这是
		<a href="http://ife.baidu.com">这是一个链接到http://ife.baidu.com的链接</a></p>
		<img src="http://f.hiphotos.baidu.com/image/h%3D200/sign=269538a28344ebf87271633fe9f8d736/2e2eb9389b504fc29897b1a4e1dde71191ef6d42.jpg" alt="">
		<p>个很长的段落这是一个很个很长的段落这是一个很个很长的段落这是一个很个很长的段落这是一个很</p>
	</article>

	<article id="article2">
		<hgroup>
			<h2>另一篇文章一级标题</h2>
			<h3>文章二级标题</h3>
		</hgroup>
		<span>陆逊 2016年9月19日</span>
		<p>这是一个很长的段落这是一个很长的段落这是一个很长的段落这是一个很长的段落这是一个很长的段落<br>
		一个很长的段落这是一个很长的段落这是一个很长的段落这是一个很长的段落这是一个很长的段落这是一个很长的段落这是
		<a href="http://ife.baidu.com">这是一个链接到http://ife.baidu.com的链接</a></p>
		<img src="http://f.hiphotos.baidu.com/image/h%3D200/sign=269538a28344ebf87271633fe9f8d736/2e2eb9389b504fc29897b1a4e1dde71191ef6d42.jpg" alt="">
		<p>个很长的段落这是一个很个很长的段落这是一个很个很长的段落这是一个很个很长的段落这是一个很</p>
		<ol>
			<li>列表项目一</li>
			<li>列表项目二</li>
			<li>列表项目三</li>
		</ol>
	</article>

	<article id="piclist">
		<h2>蜡笔小新图片</h2>
		<figure>
			<figcaption>蜡笔小新</figcaption>
			<img src="http://attach.bbs.miui.com/forum/201203/20/170226n5qcwdpusnjdsswy.jpg" alt="蜡笔小新">
		</figure>
		<figure>
			<figcaption>蜡笔小新</figcaption>
			<img src="http://attach.bbs.miui.com/forum/201203/20/170226n5qcwdpusnjdsswy.jpg" alt="蜡笔小新">
		</figure>
		<figure>
			<figcaption>蜡笔小新</figcaption>
			<img src="http://attach.bbs.miui.com/forum/201203/20/170226n5qcwdpusnjdsswy.jpg" alt="蜡笔小新">
		</figure>
		<figure>
			<figcaption>蜡笔小新</figcaption>
			<img src="http://attach.bbs.miui.com/forum/201203/20/170226n5qcwdpusnjdsswy.jpg" alt="蜡笔小新">
		</figure>
		<figure>
			<figcaption>蜡笔小新</figcaption>
			<img src="http://attach.bbs.miui.com/forum/201203/20/170226n5qcwdpusnjdsswy.jpg" alt="蜡笔小新">
		</figure>
	</article>

	<article id="article3">
		<hgroup>
			<h2>最后一篇文章的一级标题</h2>
			<h3>文章二级标题</h3>
		</hgroup>
		<span>小新 2016年9月19日</span>
		<ol>
			<li>排名1</li>
			<li>排名2</li>
			<li>排名3</li>
		</ol>
		<table>
			<thead>
				<tr>
					<th>表头</th>
					<th>表头</th>
					<th>表头</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>表内单元格</td>
					<td>表内单元格</td>
					<td><a href="">操作</a></td>
				</tr>
			
				<tr>
					<td>表内单元格</td>
					<td>表内单元格</td>
					<td><a href="">操作</a></td>
				</tr>
			
				<tr>
					<td>表内单元格</td>
					<td>表内单元格</td>
					<td><a href="">操作</a></td>
				</tr>
			
				<tr>
					<td>表内单元格</td>
					<td>表内单元格</td>
					<td><a href="">操作</a></td>
				</tr>
			
			</tbody>
			<tfoot>
				<tr>
					<td>总计</td>
					<td colspan="2">1000</td>
				</tr>
			</tfoot>
		</table>
	</article>

	<article id="sidebar">
		<h2>这里以后是一个侧栏，这是侧栏的标题</h2>
		
		<form action="">
		<!-- 邮箱 -->
			<div>
				<div class="input-title">
					<label for="email">请输入邮箱地址：</label>
				</div>
					<input type="email" id="email" placeholder="请输入邮箱地址">
			</div>
			<div class="input-tip">邮箱地址请按要求格式输入</div>
			<!-- 密码 -->
			<div>
				<div class="input-title">
					<label for="pa">请输入密码：</label>
				</div>
					<input type="password" placeholder="请输入密码" id="pa">
			</div>
			<div>
				<div class="input-title">
					<label for="pas">请再次输入密码：</label>
				</div>
				<input type="password" id="pas" paceholder="请再次输入密码">
			</div>	
			<div class="input-tip">密码请为6-16位英文数字</div>
			<!-- 性别 -->
			<div>
				<div class="input-title">
					性别：
				</div>
				<input type="radio" name="sex" value="male" id="male">
				<label for="male">男</label>
				<input type="radio" name="sex" value="male" id="female" checked>
				<label for="female">女</label>
			</div>
				
			<div>
				<div class="input-title">
					城市：
				</div>
				<select>
					<option value="beijing">北京</option>
					<option value="shanghai">上海</option>
				</select>
			</div>
				

			<div>
				<div class="input-title">
				爱好：
				</div>
				<input type="checkbox" value="sport" id="sport"><label for="sport">运动</label>
				<input type="checkbox" value="art" id="art"><label for="art">艺术</label>
				<input type="checkbox" value="science" id="science"><label for="science">科学</label>
			</div>
			<div>
				<div class="input-title">
				个人描述：
				</div>
				<textarea name="miaoshu" id="miaoshu">这是一个个人描述</textarea>
			</div>
				
				<input type="submit" value="确认提交">
			
		</form>
	</article>

	<footer>
		<span>版权所有</span>
	</footer>
</body>
</html>